<template>
  <div class="classroomMamage">
    <el-card>
      <el-form label-width="100px">
        <!-- 教室名称 -->
        <el-form-item label="教室名称" >
          <el-col :span="10">
            <el-input :disabled="true" width="80" :value="roomInfo.roomname"></el-input>
          </el-col>
        </el-form-item>
        <!-- 教室时间 -->
        <el-form-item label="教室时间">
          <el-col :span="10">
            <el-input  type="textarea" :value="roomInfo.starttime+' - '+roomInfo.endtime"  :disabled="true"  width="80"></el-input>
          </el-col>
        </el-form-item>
        <!-- 教室密码 -->
        <el-form-item label="教室密码">
          <el-col :span="10">
            <el-input  type="textarea" 
              :value="'老师密码:'+roomInfo.chairmanpwd+'  助教密码:'+roomInfo.assistantpwd +'  巡课密码:'+roomInfo.patrolpwd+'  学生密码:'+roomInfo.confuserpwd"  
              :disabled="true" width="80">
            </el-input>
          </el-col>
        </el-form-item>
        <!-- 老师地址 -->
        <el-form-item label="老师地址">
          <span>{{teacherAddress}}</span>
          <el-button type="text" v-clipboard:copy="teacherAddress" v-clipboard:success="copyUrl">复制地址</el-button>
        </el-form-item>
         <!-- 学生地址 -->
        <el-form-item label="学生地址">
          <span>{{confuserAddress}}</span>
          <el-button type="text" v-clipboard:copy="confuserAddress" v-clipboard:success="copyUrl">复制地址</el-button>
        </el-form-item>
        <!-- 课件列表 -->
        <el-form-item label="课件列表">
            <el-button type="primary" plain @click="goToURL('courseware',{serial:params.serial,mode:'room'})">查看课件</el-button>
            <el-button type="primary" plain @click="goToURL('courseware',{serial:params.serial,mode:'bind'})">关联课件</el-button>
            <el-button type="primary" plain @click="dialogUploadVisiable = true">添加课件</el-button>
        </el-form-item>
         <!-- 教室成员 -->
        <el-form-item label="教室成员">
            <el-button type="primary" plain @click="goToURL('roomMembers',{serial:params.serial})">教室成员</el-button>
            <el-button type="primary" plain @click="addMemberButton(2)">添加学员</el-button>
            <el-button type="primary" plain @click="addMemberButton(0)">添加教师</el-button>
        </el-form-item>
        <el-form-item>
            <el-col :span="10">
              <el-button type="primary" style="float:right" @click="goToURL('addRoom',{serial:params.serial,id:params.id})">编辑</el-button>
            </el-col>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog title="上传课件" :visible.sync="dialogUploadVisiable">
      <el-form>
        <el-form-item label="操作类型">
          <el-radio v-model="radio" label="1">本地上传</el-radio>
        </el-form-item>
        <el-form-item label="选择文件">
          <el-upload
            class="upload-demo"
            :headers="{
              token:token
            }"
            :action="roomUploadFileURL"
            :on-success="handleUploadSuccess"
            :before-upload="beforeUpload"
            name="filedata"
            :on-error = "uploadError"
            :limit="9999"
            :on-progress="onUploading"
            :data="{
              serial:params.serial
            }"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">您可以上传资料文件大小限制在100M以内,文件的类型如下(*.xls;*.xlsx;*.ppt;*.pptx;*.doc;*.docx;*.txt;*.pdf;*.jpg;*.gif;*.jpeg;*.png;*.bmp;*.mp3;*.mp4)</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUploadVisiable = false">取 消</el-button>
        <el-button type="primary" @click="dialogUploadVisiable = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加成员 -->
    <el-dialog :title="addMemberFlag === 2 ? '添加学员' : '添加教师'" :visible.sync="addMemberDialogVisiable"
      width="70%"
      :before-close="addMemberHandleClose">
      <div class="search_wrap">
        <el-input
          placeholder="用户名"
          v-model="searchCondition"
          clearable
          @clear="searchClear"
          @keyup.enter.native="queryListData"
          style="width: 260px;"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="queryListData">搜索</el-button>
      </div>
      <div class="table_list">
        <el-table
          ref="nicheTable"
          :data="tableListData"
          @selection-change="handleSelectionChange"
          min-height="500"
          border
          v-loading="loading"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column type="selection" align="center" width="40" />
          <el-table-column
            v-for="(item,index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
      <div class="search_wrap" style="height:50px">
        <el-button type="primary" style="float:right" @click="confirmAddMember">确定</el-button>
      </div>
      </el-dialog>
  </div>
</template>
<script>
import http from "@/api/room";
import { uploadFileURL } from "@/utils/url";
import { formatDate, formatArray } from "@/utils";
import { roomUploadFileURL } from "@/utils/url";
import { paginationMixin } from '@/mixin';
export default {
  name: "roomPrepare",
  mixins: [paginationMixin],
  data() {
    return {
      http: http,
      token:sessionStorage.getItem('access_token'),
      params:{},
      dialogUploadVisiable: false, //上传框是否可见
      addMemberDialogVisiable: false, //增加成员对话框是否可见
      addMemberFlag: 0,  // 判断是添加学员还是添加教师标识
      searchCondition: '', // 添加成员对话框查询条件
      checkMemberData: [], // 选中成员数据
      tableListData: [], // 全部成员数据
      userData: null, // 缓存用户信息
      loading: false,
      radio: "1",
      uploadFileURL, //上传地址
      file: null, //上传文件
      teacherAddress:'', //老师地址
      confuserAddress:'', //学生地址
      is_uploading: false, //上传状态
      roomUploadFileURL, //上传地址
      tableCaption: [
        {
          label: "帐号",
          value: "username",
          width: 200
        },
        {
          label: "用户名",
          value: "name",
          width: 200
        },
        {
          label: "用户角色",
          value: "role",
          width: 100
        },
        {
          label: "手机",
          value: "mobile",
          width: 200
        }
      ],
      roomInfo:{
          assistantpwd: "",
          autoopenav: 1,
          center_id: 1,
          chairmanpwd: "",
          confuserpwd: "",
          create_time: "",
          duration: 0,
          endtime: "",
          id: 2,
          passwordrequired: 1,
          patrolpwd: "",
          roominfo: "",
          roomname: "",
          roomtype: 0,
          serial: "",
          starttime: "",
          update_time: "",
          videoframerate: 10,
          videotype: 0,
      }
    };
  },
  methods:{
    goToURL(name, params){
      console.log(params)
      this.$router.push({ name,query:params});
    },
    //复制地址
    copyUrl(url){
      this.$message.success("复制成功");
    },
    //获取教室信息
    getRoomInfo(params){
         http.getClassroomDetail(params).then(res=>{
           this.roomInfo = res.data
        })
    },
    //上传成功处理
    handleUploadSuccess(res, file) {
      console.log("res, file:", res, file);
      this.file = URL.createObjectURL(file.raw);
      this.$message.success(res.msg || "上传成功！");
    },
    //上传前处理
    beforeUpload(file){
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 100MB!");
      }
      return isLt2M;
    },
    //上传失败
    onUploading(){
      this.is_uploading = true
    },
    //上传错误
    uploadError(){
      this.is_uploading = false
      this.$message.error("上传失败!");
    },
    // 监听添加成员按钮事件
    addMemberButton(addMemberFlag) {
        this.addMemberFlag = addMemberFlag
        this.addMemberDialogVisiable = true
        this.loading = true
        this.getListData()
    },
    // 关闭添加学员对话框前钩子函数
    addMemberHandleClose() {
        this.addMemberDialogVisiable = false
        this.searchCondition = ''
        this.tableListData = []
    },
    // 添加成员对话框内的条件查询函数
    queryListData () {
        this.getListData()
    },
    // 选中成员钩子函数
    handleSelectionChange(val) {
        this.checkMemberData = val;
        console.log(val)
    },
    // 提交上传学员
    confirmAddMember () {
        let query = this.$route.query
        let roomuserarr = this.checkMemberData
        this.userData = JSON.parse(sessionStorage.getItem('user'))
        roomuserarr.map(item => {
            item.center_id = this.userData.center_id
            item.serial = parseInt(query.serial)
            item.userid = item.id
            if (item.role === '学员') {
                item.role = 2
            } else {
                item.role = 0
            }
            delete item.id
        })
        roomuserarr = JSON.stringify(roomuserarr)
        console.log('roomuserarr', roomuserarr)
        if (roomuserarr.length) {
            http.addRoomMuser({ roomuserarr }).then(res => {
                this.$message.success(res.msg || '添加成员成功！')
                this.addMemberDialogVisiable = false
            })
        } else {
            this.addMemberDialogVisiable = false
        }
    },
    // 分页查询
    getListData (page=this.currentPage,list_rows=this.limit,search=this.searchCondition) {
        this.loading = true
        let query = this.$route.query
        let params = { 'serial' : query.serial,page,list_rows,search }
        console.log('params',params)
        if (this.addMemberFlag === 2) {
            http.getRoomStudentList(params).then(res => {
                this.loading = false
                this.total = res.data.total;
                let tableListData = res.data.data
                if(tableListData.length){
                    tableListData.map(item=>{
                        item.role = '学员'
                    })
                }
                this.tableListData = tableListData
                console.log('tableListData', this.tableListData)
            })
        } else {
            http.getRoomTeacherList(params).then(res => {
                this.loading = false
                this.total = res.data.total;
                let tableListData = res.data.data
                if(tableListData.length){
                    tableListData.map(item=>{
                        item.role = '教师'
                    })
                }
                this.tableListData = tableListData
                console.log('tableListData', this.tableListData)
            })
        }
    },
    // 条件查询框清空
    searchClear() {
        this.getListData()
    }
  },
  created(){
    var query = this.$route.query
    let center_id = JSON.parse(sessionStorage.getItem('user')).center_id
    // console.log('query',query)
    this.params = query
    this.teacherAddress = 'http://webi-dev.jingqiweb.com/#/loginentry/'+this.params.serial+`/101712/1/0/${center_id}`;
    this.confuserAddress = 'http://webi-dev.jingqiweb.com/#/loginentry/'+this.params.serial+`/101712/1/2/${center_id}`
    this.getRoomInfo(this.params)
    //this.init();
  },
};
</script>
<style lang="scss" scoped>
.classroomMamage {
  padding: 10px;
  .sub-lable{
    width: 70px;
    text-align: right;
    padding-right: 2px;
  }
}
</style>